<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
     .main{
	   position:absolute;
	   width:400px;
	   height:400px;
	   left:0;
	   top:0;
	   right:0;
	   bottom:0;
	   margin:auto;
	   border:solid 1px black;
	 }
	 .top{
	   width:100%;
	   height:50px;
	   background:green;
	   text-align:center;
	   color:white;
	   line-height:50px;
	 }
	 .drawing{
	   position:relative;
	   width:150px;
	   height:200px;
	   top:-50px;
	   left:400px;
	 }
	 span{
	   text-aline:center;
	   border-radius:5px;
	   border:solid 1px black;
	   padding:5px;
	 }
	 p{
	   text-align:center;
	 }
	 .content{
	   position:absolute;
	   width:50px;
	   height:50px;
	   border:solid 1px black;
	   border-radius:5px;
	   left:0;
	   top:0;
	   right:0;
	   bottom:0;
	   margin:auto;
	 }
  </style>
  <script src="11_DOM基本操作.js"></script>
 </head>
 <body>
    <div class="main">
	  <div class="top">点击画板</div>
	  <div class="drawing">
	    <p>颜色选择</p>
		<p>
		  <span style="background:red" id="c01">红色</span>
		  <span style="background:yellow" id="c02">黄色</span>
		  <span style="background:blue" id="c03">蓝色</span>
		</p>
		<p>选择宽度</p>
		<p>
		  <span id="s01">100</span>
		  <span id="s02">150</span>
		  <span id="s03">200</span>
		</p>
		<p>选择高度</p>
		<p>
		  <span id="h01">100</span>
		  <span id="h02">150</span>
		  <span id="h03">200</span>
		</p>
	  </div>
	</div>
	<div class="content" id="content"></div>
 </body>
</html>
